<template>
  <Modal :value="isModal" :closable="false" :mask-closable="false" :footer-hide="true" :width="350">
    <Form ref="form" :model="form" :rules="rule" :style="{marginTop: '24px'}">
      <FormItem :style="{textAlign: 'center'}">
        <Icon :size="64" type="md-contact" />
      </FormItem>
      <FormItem prop="username">
        <Input type="text" v-model="form.username" placeholder="用户名">
        <Icon type="ios-person-outline" slot="prepend"></Icon>
        </Input>
      </FormItem>
      <FormItem prop="password">
        <Input type="password" v-model="form.orgPassword" placeholder="密码" @on-keydown.enter="handleSubmit('form')">
        <Icon type="ios-lock-outline" slot="prepend"></Icon>
        </Input>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="handleSubmit('form')" long :loading="loading">登录</Button>
        <!-- <Button long>取消</Button> -->
      </FormItem>
    </Form>
  </Modal>
</template>

<script>
// import axios from 'axios'

export default {
  data () {
    return {
      isLogin: true,
      form: {
        username: '',
        orgPassword: ''
      },
      rule: {
        username: [
          { required: true, message: '请输入用户名.', trigger: 'blur' }
        ],
        orgPassword: [
          { required: true, message: '请输入密码.', trigger: 'blur' },
          { type: 'string', min: 6, message: '请输入至少6位数密码', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    loading () {
      return this.$store.state.client.loading
    }
  },
  methods: {
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          // this.$Message.success('Success!')
          // this.loading = true
          this.$Loading.start()
          this.$store.dispatch('client/login', {
            data: this.form,
            cb: result => {
              // this.loading = false
              this.$Loading.finish()
              this.$storage.setItem('token', result.token)
              // axios.defaults.headers.common['Authorization'] = `Bearer ${result.token}`
              this.$storage.setItem('userId', result.userId)
              this.$router.replace('/')
            },
            ecb: error => {
              console.log('login error:', error)
              // this.loading = false
              this.$Loading.error()
            }
          })
        } else {
          this.$Message.error('表单内容格式错误!')
        }
      })
    }
  },
  props: {
    isModal: false,
    handleCancel: {}
  }
}
</script>

<style>
</style>
